<template>
    <el-form ref="userFormRef" :model="userForm" :rules="rules" label-width="100px">
        <el-form-item label="账号头像">
            <e-upload v-model="userForm.avatar"/>
        </el-form-item>
        <el-form-item label="账号名称" prop="username">
            <el-input v-model="userForm.username" placeholder="输入账号名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
            <el-input v-model="userForm.phone" placeholder="输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
            <el-input v-model="userForm.password" placeholder="输入6位数密码" maxlength="6"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="dept">
            <el-radio-group v-model="userForm.dept" class="user-dept">
                <el-radio v-for="item in deptList" :key="item.id" :value="item.id">{{ item.deptName }}</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="备注信息">
            <el-input v-model="userForm.remark" type="textarea" placeholder="输入备注信息"></el-input>
        </el-form-item>
    </el-form>
</template>
<script setup>
const userForm = ref({
    avatar: '',
    username: '',
    phone: '',
    password: '',
    dept: '',
});

const rules = ref({
    username: [
        { required: true, message: '请输入账号名称', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入登录密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
    ],
    dept: [
        { required: true, message: '请选择所属部门', trigger: 'change' },
    ],
})
const deptList = ref([
    { id: 1, deptName: "运营部" },
    { id: 2, deptName: "技术部" },
    { id: 3, deptName: "美编部" },
    { id: 4, deptName: "销售部" },
    { id: 5, deptName: "管理部" },
    { id: 6, deptName: "财务部" },
    { id: 7, deptName: "补能部" },
    { id: 8, deptName: "人事部" },
]);
const reset = (type, data) => {
    for (const i in userForm.value) {
        userForm.value[i] = '';
    }
    if (type === 'edit') {
        data.dept = Number(data.dept)
        userForm.value = JSON.parse(JSON.stringify(data));
    }
}
const userFormRef = ref(null);
const validate = () => {
    return new Promise(async(resolve, reject) => {
        await userFormRef.value.validate((valid, fields) => {
            resolve(valid)
        })
    })
}
const getFormData = () => {
    return JSON.parse(JSON.stringify(userForm.value))
}
const resetForm = () => {
    userFormRef.value.resetFields()
}
defineExpose({
    getFormData,
    reset,
    validate,
    resetForm
})
</script>
<style lang="scss" scoped>
.user-dept {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    :deep(.el-radio) {
        margin-right: calc(4% / 3);
        &:nth-child(4n) {
            margin-right: 0;
        }
    }
}
</style>